<gm:page title="Tabsdemo">
    <h1>This app demonstrates usage of different gm-tags in different tabs.</h1>
    <gm:tabs target="Container"/>
    <gm:container id="Container" style="padding:3px;border:1px solid #369;width:1000px;">
      <gm:section id="list" title="gm:list">
        <h><b>This tab demonstrates use of gm:list tag that displays entries from ${test} feed in list format.</b></h>
        <gm:list id="mylist" data="${test}" template="simple" pageSize="10"/>
      </gm:section>

      <gm:section id="map" title="gm:map">
        <h><b>This tab demonstrates use of gm:map tag that renders a map with entries bound to test-feed mapped with markers on it.</b></h>
        <gm:map id="mymap" data="${test}"/>
      </gm:section>

      <gm:section id="search" title="gm:search gm:param">
        <h><b>This tab demonstrates use of gm:search tag that allows searching Google-Base and results are displayed in list format.</b></h>
        <br><h><b>This tab also demonstrates use of gm:param tag.</b></h>
        <gm:search id="mysearch" data="${base}" ref="atom:title" param="model" hint="mercedes">
          <gm:param name="model" value=""/>
        </gm:search>    
        <gm:list id="SearchResult" data="${mysearch}"/>
      </gm:section>
      
      <gm:section id="item" title="gm:item gm:handleEvent">
      <h><b>This tab demonstrates the use of gm:item which displays details of individual items from a list.</b></h>
      <br><h><b>This tab also demonstrates the use of gm:handleEvent which binds to the list and on selection of the list item displays it's detail.</b></h>
      <table>
        <tr>
          <td><gm:list id="ItemList" data="${test}" size="10"/></td>
          <td valign="top">
            <gm:item id="myitem" template="Itemtemplate" >
              <gm:handleEvent src="ItemList"/>
            </gm:item>
          </td>
        </tr>
      </table>
     </gm:section>
     
     <gm:section id="data" title="gm:data">
       <h><b>This tab demonstrates the use of gm:data in which the news-feed url is mentioned and then referred and displayed within a list.</b></h>
        <gm:data id="MyData" data="http://newsrss.bbc.co.uk/rss/newsonline_uk_edition/world/rss.xml"/>
       <gm:list id="NewsFeedList" data="${MyData}" template="simple" pageSize="10"/>
     </gm:section>  
     
     <gm:section id="calendar" title="gm:calendar">
       <h><b>This tab demonstrates the use of gm:calendar which shows a calendar bound to a feed via date.</b></h>  
           <table class="gm-padded" width="100%">
         <tr>
           <td><gm:calendar id="myCalendar" data="http://www.google.com/calendar/feeds/2odmstb4hh1qcmg4ml8pj1uoo4%40group.calendar.google.com/public/full"/></td>
            <td>
            <div>
              <gm:list id="myList" data="${myCalendar}" template="eventsTemplate">
                <gm:handleEvent src="myCalendar" event="select"/>
              </gm:list>
            </div>
            </td>
         </tr>
        </table>
     </gm:section>
     
      <gm:section id="subscribe" title="gm:subscribe">
        <h><b>This tab demonstrates use of gm:subscribe.</b></h>
        <gm:subscribe label="BBC News Feed" data="http://newsrss.bbc.co.uk/rss/newsonline_uk_edition/world/rss.xml"/>
      </gm:section>  
   </gm:container>
  
    <gm:template id="Itemtemplate">
       <gm:html ref="atom:content"/> 
    </gm:template>
    <gm:template id="eventsTemplate">
    <table class="gm-small">
      <tr repeat="true">
        <td><b><gm:date ref="gd:when/@startTime"/></b></td>
        <td><gm:text ref="atom:title"/></td>
      </tr>
    </table>
   </gm:template>
  
</gm:page>

